const buttons = document.querySelectorAll('.ripple')
buttons.forEach(buttons => {
    buttons.addEventListener('click', function (e) {
        const { pageX, pageY } = e

        const { offsetTop, offsetLeft } = e.target

        const xInside = pageX - offsetLeft
        const yInside = pageY - offsetTop

        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = `${yInside}px`
        circle.style.left = `${xInside}px`

        this.appendChild(circle)

        setTimeout(() => circle.remove(), 500)
    })
})